
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>编辑器</title>
<link rel="stylesheet" type="text/css" href="jquery.dad.css"/>
<style type="text/css">

:focus {outline: 0;}
#tit div{float:left; width:100px; text-align:center; line-height:30px; font-size:14px; border-bottom:1px solid #cdcdcd; cursor:pointer; }

#image1 #upload div{height:29px; border:0px solid #dedede; width:160px;  border-radius:4px; background-color:#eeeeee; cursor:pointer;}
#image1 #picurl{height:25px; border:1px solid #dedede; width:153px; border-radius:4px; padding-left:5px;}
#image1 #upload {height:29px; border:0px solid #dedede; width:160px; border-radius:4px; background-color:#eeeeee; }


#image1 #picwidth{height:25px; border:1px solid #dedede; padding-left:5px; margin-left:20px; margin-top:15px; border-radius:4px; width:60px; float:left;}
#image1 #picheight{height:25px; border:1px solid #dedede; padding-left:5px; margin-left:20px; margin-top:15px; border-radius:4px; width:60px; float:left;}
#image1 div{padding-top:10px; width:200px; overflow:hidden; border:0px; text-align:left; margin-left:20px; font-size:14px;}
.up_tu_arry{display: flex;align-items: flex-start;flex-wrap: wrap;}
</style>

<script src="jq3.3.1.js"></script>
<script src="jquery.dad.min.js"></script>
<script src="vue.min.js"></script>
<script src="Sortable.min.js"></script>
<script type="text/javascript">

//获得host
var weburl= window.location.href;
// if( weburl.indexOf(".com")>0 )
// {
    var host="http://"+window.location.hostname;
// }
// else
// {
// 	var host="http://"+window.location.hostname+"/xiaohu/public";
// }

//上传图片(这里做好上传功能后，调用oper函数即可,第1个参数menu值固定为operdo,第2个参数为上传后的图片网址)
function quren_up(obj,menu,types)
{
	var that=this
	
	var list=[]
	// $('.up_tu_item').each(function(index,item){
	// 		var name =$(item).attr('data-name');
	// 		console.log(name)
	// 		$.each(imgFile, function(index, value) {
				
	// 			if(value['name']==name){
	// 				list.push(value)
	// 			}
	// 		});
	// 	console.log(name)
	// })
	
	// console.log(list,'list')
	console.log(this.app.imgList)
	
	
	
	// var files = $("input[name='"+obj+"']")[0].files;
	
	$('.on_chuan').text(1)
	
	img_arry=[]
	console.log(imgFile,'imgFile')
	if(this.app.imgList.length>0){
		up(obj,menu,types,this.app.imgList[0])
	}

	$.each(this.app.imgList, function(index,item){
	   
		
		
		
		
		
		
	})

	//获得文件对象
	// var file = $("input[name='"+obj+"']")[0].files[0];
	//创建FormData
	// var formData = new FormData();
	// formData.append('file',file);


		//ajax开始
		// $.ajax({
		// 	url:host+"/shang/supplier/oss_uploadImage?types="+types,
		// 	type: "post",
		// 	async: true,
		// 	dataType:"json",
		// 	data: formData,
		// 	cache: false,			//上传文件无需缓存
		// 	processData: false,		//用于对data参数进行序列化处理 这里必须false
		// 	contentType: false, 	//必须
		// 	success:function(res){
		// 		if(res.code==100)
		// 		{
					
		// 			console.log(menu,res.data)
		// 			oper(menu,res.data);
		// 		}
		// 		else
		// 		{
		// 			alert(res.msg);
		// 		}
		// 	}
		//  });
		 //ajax结束
	
}
var img_arry=[]
function up(obj,menu,types,files){
	var formData = new FormData();
	
	formData.append('file',files.file);
	var that=this
	
	$.ajax({
		url:'http://120.55.77.106:3000/api/upload',
		type: "post",
		async: true,
		dataType:"json",
		data: formData,
	beforeSend: function(load) {
		$('.up_tu_item').find('.up_txt').text('正在上传')
		$('.up_tu_item').find('.up_jindu span').css('width','50%')
	},
	complete: function(end) {
		
	},
		cache: false,			//上传文件无需缓存
		processData: false,		//用于对data参数进行序列化处理 这里必须false
		contentType: false, 	//必须
		success:function(res){
			if(res.code==200)
			{
				$('.up_tu_item').find('.up_txt').text('上传成功')
				$('.up_tu_item').find('.up_jindu span').css('width','100%')
				
				$('.deng_num').text($('.up_txt').text()=='等待上传'.length)
				
				img_arry.push(res.fileUrl)
				that.app.imgList.splice(0,1)
				if(that.app.imgList.length==0){
	                 $('.on_chuan,.deng_num').text(0)
					 $('.up_tu_item').remove()
					 
					oper(menu,img_arry);
				}
				
				if(that.app.imgList.length>0){
					
					up(obj,menu,types,that.app.imgList[0])
				}
			}
			else
			{
				alert(res.message);
			}
		}
	 });
	
	
	
}



//上传图片后的操作
function oper(menu,picurl)
{
	if(menu=='operdo')
	{
		showpic(picurl);
		
		
	}
}



//显示图片，并且赋值到上级iframe
function showpic(val)
{
	
	
	

	console.log('11111')
	$('#image1').children('div:eq(2)').html('');	//默认不显示图片
	$('#picurl',parent.document).val(val);			//默认赋空值到上级iframe
	let pic = new Image();
	pic.src = val;
	pic.onload = function ()
	{
		$('#image1').children('div:eq(2)').html('<img src="'+val+'" style=" height:40px;">');	//显示图片
		$('#picurl',parent.document).val(val);		
		
	}
	// $('#picurl',parent.document).charu();	
	 window.parent.charu();
	
}


var imgFile=[]
function upimg(obj,menu,types){
	var files = $("input[name='"+obj+"']")[0].files;
	var length=$('.up_tu_item').length+files.length
	console.log(files,'files')
	$('.deng_num').text(length)
		for (var i = 0; i < files.length; i++) {
			
			
			imgFile.push(files[i])
			console.log(imgFile)
				var name=files[i]['name']
				console.log(name,'1111111')
			var r = new FileReader();
			r.onload = function(ev) {
				console.log(name,'22222')
				var tag =
				`<div class="up_tu_item"  data-name='${name}'>
			<div class="up_tu_item_top">
			<img class='ossimg' src='${this.result}'  alt=''> 
			</div>
			<div class="up_tu_item_bottom">
				<p class="up_jindu"><span style="width: 0%;"></span></p>
               <p class="up_txt">等待上传</p>
			</div>
		</div>`
				$(".up_tu_arry").append(tag)

				$('.up_tu_arry').dad({
					placeholder:'',
					callback: function (res) {

					}
				});
			};
			r.readAsDataURL(files[i]);
		}
		
			
}



function quren_up222(){
	var img = [];
	$(".ossimg").each(function() {
		img.push($(this).attr("src"));
	});
	
	
	
	$.ajax({
		url:host+"/smdk/winks/oss_uploadImage?types=goods",
		data: {
			img:img
		},
		type: 'POST',
		dataType: 'json',
		beforeSend: function(load) {
			console.log(load)
		},
		complete: function(end) {
			console.log(end)
		},
		success: function(result) {
			var obj = eval(result);
			console.log(obj)
		},
		error: function(err) {
			layer.msg('网络错误', {
				time: 2000
			});
		}
	})
	
	console.log(img)
	
}

</script>

<script type="text/javascript">
$(document).ready(function(){

	//填写图片网址和上传图片的窗口切换
	$('#tit').children('div:eq(0)').click(function(){
		$('#tit').children('div:eq(0)').css('background-color','#9A4E4E');
		$('#tit').children('div:eq(0)').css('color','#ffffff');
		$('#tit').children('div:eq(1)').css('background-color','#f6f6f6');
		$('#tit').children('div:eq(1)').css('color','#666666');
		$('#image1').children('div:eq(0)').css('display','block');
		$('#image1').children('div:eq(1)').css('display','none');
	})
	
	$('#tit').children('div:eq(1)').click(function(){
		$('#tit').children('div:eq(1)').css('background-color','#9A4E4E');
		$('#tit').children('div:eq(1)').css('color','#ffffff');
		$('#tit').children('div:eq(0)').css('background-color','#f6f6f6');
		$('#tit').children('div:eq(0)').css('color','#666666');
		$('#image1').children('div:eq(0)').css('display','none');
		$('#image1').children('div:eq(1)').css('display','block');
	})


	
	//监听填写图片网址
	$('#picurl').keyup(function(){
		let picurl = $('#picurl').val();
		showpic(picurl);
	})
	$('#picurl').change(function(){
		let picurl = $('#picurl').val();
		showpic(picurl);
	})
	
	
	
	//监听填写图片网址的宽和高
	$('#picwidth').keyup(function(){
		$('#picwidth',parent.document).val( $('#picwidth').val() );
	})
	$('#picwidth').change(function(){
		$('#picwidth',parent.document).val( $('#picwidth').val() );
	})
	
	$('#picheight').keyup(function(){
		$('#picheight',parent.document).val( $('#picheight').val() );
	})
	$('#picheight').change(function(){
		$('#picheight',parent.document).val( $('#picheight').val() );
	})
	
	
	//鼠标移动到上传按钮上的效果
	$('input[name="picfile1"]').mouseover(function(){
		$('#upload').css('background-color','#dedede');
	})
	
	$('input[name="picfile1"]').mouseout(function(){
		$('#upload').css('background-color','#eeeeee');
	})
})
</script>
</head>
<body style="padding:0px; margin:0px;">

<div id="app">
			<!-- <div id="tit" style="overflow:hidden">
				<div style="color:#ffffff; background-color:#9A4E4E;">
					网络图片
				</div>
				<div style="color:#666666; background-color:#f6f6f6;">
					上传图片
				</div>
			</div>
			
			<div id="image1" style="width:200px;">
				
				<div>
					<input type="text" id="picurl" placeholder="填写图片网址">
				</div>
				<div style="display:none; position:relative;" >
					<input type="button" id="upload" value="点击上传图片...">
					<input name="picfile1" type="file" onChange="upload('picfile1','operdo','goods')" style="width:160px; height:35px; line-height:35px; padding-left:5px; position:absolute; left:0px; top:10px; opacity:0; "/>
				</div>
				
				<input type="text" id="picwidth" placeholder="宽" onkeyup="this.value=this.value.replace(/\D/g,'')"  onafterpaste="this.value=this.value.replace(/\D/g,'')">
				<input type="text" id="picheight"  placeholder="高" onkeyup="this.value=this.value.replace(/\D/g,'')"  onafterpaste="this.value=this.value.replace(/\D/g,'')">
				<div>&nbsp;</div>
			</div> -->
			

<div class="up_tu">
<div class="up_tu_title">
	<span>上传图片</span> <p><span class="queren_up" @click="fileClick(2)" @drop="drop($event)" @dragenter="dragenter($event)" @dragover="dragover($event)">插入图片</span> <span class="queren_up" onclick="quren_up('picfile1','operdo','goods')">确认上传</span></p>
</div>	
<div class="up_tu_list">
	
	<div class="up_tu_arry">
		<!-- <div class="up_tu_item">
			<div class="up_tu_item_top">
			</div>	
			<div class="up_tu_item_bottom">
				<p class="up_jindu"><span style="width: 80%;"></span></p>
               <p class="up_txt">正在上传80%</p>
			</div>
		</div> -->
		<div class="up_tu_item" v-for="item in imgList">
			<div class="up_tu_item_top">
				<img  class='ossimg' :src="item.file.src">
			</div>	
			<div class="up_tu_item_bottom">
				<p class="up_jindu"><span style="width: 0%;"></span></p>
		       <p class="up_txt">等待上传</p>
			</div>
		</div>
	</div>
	
	
	<input @change="fileChange($event)" type="file" id="upload_file" multiple style="display: none" data-type='1'>
	<div class="up_tu_btn_wai">
	<div class="up_tu_btn" @click="fileClick(1)" @drop="drop($event)" @dragenter="dragenter($event)" @dragover="dragover($event)">
		<!-- <input name="picfile1" type="file" multiple="multiple"  onChange="upimg('picfile1','operdo','goods')"/> -->
	    
	</div>
	<p>上传图片</p>
	</div>
</div>

<div class="up_num">
	正在上传：<span class="on_chuan">0</span>个，等待上传：<span class="deng_num">0</span>个
</div>

</div>

</div>	


			
</body>
<script>
		var app = new Vue({
			el: '#app',
			data () {
				return {
				imgList: [],
				sortList: Object,
				type:1
				}
			},
			methods: {
				fileClick(type) {
					if(type==2){
						$('#upload_file').attr('data-type','2')
					}else{
						$('#upload_file').attr('data-type','1')
					}
					document.getElementById('upload_file').click()
				},
				fileChange(el) {
					var type=el.target.dataset.type
					this.type=type
					
					console.log(type)
					
					console.log(el)
				

					if (!el.target.files[0].size) return;
					this.fileList(el.target,1);
					el.target.value = ''
				},
				fileList(fileList) {
					let files = fileList.files;
					var _this = this;
					if(fileList.items !== undefined){//Chrome拖拽文件
						for(var i = 0; i < fileList.items.length; i++){
							var item = fileList.items[i];
							if(item.kind === "file" && item.webkitGetAsEntry().isFile){
								var file = item.getAsFile();
								if (file.size > 5*1024*1024) {
									alert("文件尺寸不能超过5M");
									return;
								}
								_this.fileAdd(file);
							} else{
                                alert("不可以上传文件夹");
							}
						}
					} else {
						for (let i = 0; i < files.length; i++) {
							var file = files[i];
							if (file.type != '') {//常规文件判断
								if (file.size > 5*1024*1024) {
									alert("文件尺寸不能超过5M");
									return;
								}
								_this.fileAdd(file);
							} else {
								try {
									var fileReader = new FileReader();
									fileReader.readAsDataURL(file.slice(0,4));
									fileReader.addEventListener('load',function(e){
										if (file.size > 5*1024*1024) {
											alert("文件尺寸不能超过5M");
											return;
										}
										_this.fileAdd(file);
									},false);
									fileReader.addEventListener('error',function(e){
										alert("不可以上传文件夹1");
									},false);
								} catch (e){
									alert("不可以上传文件夹2");
								}
								
							}
						}		
					}
					
					
				},
				//文件添加
				fileAdd(file) {
					var that=this
					//总大小
					this.size = this.size + file.size;
					//判断是否为图片文件
					if (file.type.indexOf('image') == -1) {
						file.src = 'img/wenjian.png';
						this.imgList.push({
							file
						});
						
					} else {
						let reader = new FileReader();
						reader.vue = this;
						reader.readAsDataURL(file);
						reader.onload = function () {
							file.src = this.result;
							this.vue.imgList.push({
								file
							});
						}
						
					}
					if(this.type==2){
						setTimeout(function(){
							that.bianli()
						},100)
					}
					
				},
				bianli(){
				
					    const handle = (property) => {
					        return function(a,b){
					            const val1 =  a[property]['name'].replace(/[^0-9]/ig,"");
					            const val2 = b[property]['name'].replace(/[^0-9]/ig,"");
					            return val1 - val2;
					        }
					    }
					
					    this.imgList.sort(handle('file'));
					
					// this.imgList.sort(function(a,b){
					// 	console.log(Number(a.file.name.replace(/[^0-9]/ig,"")) ,'a')
					// 	console.log(b.file.name,'b')
					// 					return a.file.name.localeCompare(b.file.name) // name 就是需要排序的属性
					// 				});
					// 				return this.imgList;
			// 		const handle = (property) => {
			// 		        return function(a,b){
			// 		            const val1 = a[property].name;
			// 		            const val2 = b[property].name;
			// 		            return val1 - val2;
			// 		        }
			// 		    }
			// 		this.imgList.sort(function(a,b){
						
			// 		})
			// 		    console.log(this.imgList.sort(handle('file')));
			
			// 		console.log(this.imgList)
					
				},
				//文件删除
				fileDel(index) {
					this.size = this.size - this.imgList[index].file.size;//总大小
					this.imgList.splice(index, 1);
				},
				
				//拖动目标且鼠标进入投放区时触发
				dragenter(el) {
					el.stopPropagation();
					el.preventDefault();
				},
				//拖动目标且鼠标移动在投放区时触发
				dragover(el) {
					el.stopPropagation();
					el.preventDefault();
				},
				//拖动对象且在投放区放开鼠标时触发，要先在dragover上设置禁止默认事件，才会有触发 
				drop(el) {
					el.stopPropagation();
					el.preventDefault();
					this.fileList(el.dataTransfer,0);
				}
			},
			mounted(){
				var $ul = this.$el.querySelector('.up_tu_arry')
				this.sortList = Sortable.create($ul, {
					handle: '.up_tu_item ',
					draggable: ".up_tu_item ",
					animation: 150,
					onUpdate: (event) => {
						var newIndex = event.newIndex,
                        oldIndex = event.oldIndex
                        $li = $ul.children[newIndex],
                        $oldLi = $ul.children[oldIndex]
						// 先删除移动的节点
						$ul.removeChild($li)    
						// 再插入移动的节点到原有节点，还原了移动的操作
						if(newIndex > oldIndex) {
							$ul.insertBefore($li,$oldLi)
						} else {
							$ul.insertBefore($li,$oldLi.nextSibling)
						}
						var item = this.imgList[event.oldIndex];
						this.imgList.splice(event.oldIndex, 1);
						this.imgList.splice(event.newIndex, 0, item);
					}
				})
			}
		})
	  </script>
</html>

<style type="text/css">
	.up_tu{
		width: 705px;
			height: 270px;
			background-color: #ffffff;
			border: solid 1px #e4e4e4;
			display: inline-block;
			font-size: 14px;
			color: #333333;
			
	}
	.up_tu_title{
		display: flex;
		align-items: center;
		font-size: 14px;
		color: #333333;
		height: 40px;
			background-color: #f7f7f7;
			border: solid 1px #e4e4e4;
			justify-content: space-between;
			padding: 0 20px;
		
		
	}
	.up_tu_title p span{
		margin-left: 10px;
	}
	.queren_up{
			width: 70px;
			height: 25px;
			background-color: #e4e4e4;
			display: inline-block;
			text-align: center;
			line-height: 25px;
			cursor: pointer;
	}
	.up_tu_btn{
		position: relative;
			width: 80px;
			height: 80px;
			
			background: url(../img/up_icon.png) no-repeat;
			background-size: 100%;
			margin: 0 auto;
			cursor: pointer;
	}
	.up_tu_btn input{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
		cursor: pointer;
	}
	.up_tu_btn_wai{
			width: 100px;
			height: 132px;
			background-color: #f7f7f7;
			border: solid 1px #bebebe;
			text-align: center;
			box-sizing: border-box;
			padding-top: 10px;

			
			
	}
	.up_tu_btn_wai p{
		line-height: 6px;
	}
	.up_tu_item{
		width: 100px;
		height: 132px;
		background-color: #f7f7f7;
		border: solid 1px #bebebe;
		text-align: center;
		padding: 10px;
		box-sizing: border-box;
		margin:0 10px  10px 0px ;
	}
		
	.up_jindu{
		height: 3px;
			background-color: #dcdcdc;
			border-radius: 2px;
			position: relative;
			
			margin: 8px 0 4px;
	}
	.up_jindu span{
		background-color: #ff3446;
		display: inline-block;
		height: 3px;
		position: absolute;
		left: 0;
	}
	.up_tu_item_top{
		width: 80px;
			height: 80px;
			border: solid 1px #bebebe;
	}
	.up_txt{
		margin: 0;
		font-size: 12px;
	}
	.up_tu_list{
		display: flex;
		padding-left: 20px;
		margin-top: 16px;
		height: 212px;
		overflow: auto;
		flex-wrap: wrap;
	}
	.up_num{
			height: 27px;
			background-color: #f7f7f7;
			border: solid 1px #e4e4e4;
			text-align: right;
			padding-right: 10px;
			/* border-top: 1px solid #e4e4e4; */
	}
	.up_tu_item_top img{
		width: 100% ;
		height: 100%;
	}
	
	
	#image_choose #insert_img {
	    background-color: #9A4E4E;
	    border: 0px;
	    width: 100%;
	    line-height: 30px;
	    font-size: 14px;
	    color: #ffffff;
	    cursor: pointer;
	    position: absolute;
	    top: 62px;
	}
</style>